<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 1000px;
            height: 440px;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        option = {
            title: {
                text: "郑州市:人口密度",
                textAlign:"auto",
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1996', '', '1998', '', '2000', '', '2002', '', '2004', '', '2006', '', '2008', '', '2010', '', '2012', '2014', '2016', '2019', '2021', '2023E', '2025E'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'

                }
            ],
            series: [
                {
                    name: '郑州市:人口密度(人/平方公里):858/平方公里',
                    type: 'bar',
                    barWidth: 17,
                    data: [792, 802, 814, 826, 843, 858, 872, 887, 901, 912, 928, 949, 966, 982, 1293, 1356]
                }
            ]
        };
        // 使⽤刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>